import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:gw_github_flutter/route/systemWidget/button/grouped_buttons_orientation.dart';
import 'package:gw_github_flutter/route/systemWidget/button/gwCheckbox_group.dart';
import 'package:gw_github_flutter/route/systemWidget/button/radio_button_group.dart';

class CheckBoxAndSwitchRoute extends StatefulWidget {
  CheckBoxAndSwitchRoute({Key? key}) : super(key: key);

  @override
  State<CheckBoxAndSwitchRoute> createState() => _CheckBoxAndSwitchRouteState();
}

class _CheckBoxAndSwitchRouteState extends State<CheckBoxAndSwitchRoute> {
  List<String> _checked = ["A", "B"];
  String _picked = "Two";
  bool? _isChecked = false;
  bool _isOn = false;
  bool? _isTitleChecked = false;
  bool _isOff = false;
  bool _isTitleOn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(RouteName.checkBoxAndSwitchRoute),
        ),
        body: _body());
  }

  Widget _body() {
    return SingleChildScrollView(
      child: Column(
        children: [
          const Divider(),
          const Text("Switch"),
          Row(
            children: <Widget>[
              Switch(
                  // 开启时候，那个条的颜色
                  activeTrackColor: Colors.yellow,
                  // 关闭时候，那个条的颜色
                  inactiveTrackColor: Colors.green,
                  // 设置指示器的图片，当然也有 color 可以设置
                  activeThumbImage: AssetImage('imgs/avatar-default.png'),
                  inactiveThumbImage: AssetImage('imgs/avatar-default.png'),
                  // 开始时候的颜色，貌似会被 activeTrackColor 顶掉
                  activeColor: Colors.pink,
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  value: _isOn,
                  onChanged: (onState) {
                    setState(() => _isOn = onState);
                  }),

              /// 点击无响应
              Switch(value: _isOn, onChanged: null)
            ],
          ),
          const Divider(),
          const Text("苹果样式CupertinoSwitch"),
          CupertinoSwitch(
            activeColor: Colors.green,
            value: _isOff,
            onChanged: (value) {
              setState(() {
                _isOff = value;
              });
            }),
            const Divider(),
          const Text("SwitchListTile"),
          SwitchListTile(
            title: Text('Turn On this item'),
            subtitle: Text(
                'description...description...\ndescription...description...'),
            secondary:
                Image.asset('imgs/loading.gif', width: 30.0, height: 30.0),
            isThreeLine: true,
            value: _isTitleOn,
            selected: true,
            onChanged: (onState) {
              setState(() => _isTitleOn = onState);
            }),
        
          const Divider(),
          const Text("Checkbox"),
          Row(
            children: <Widget>[
              Checkbox(
                // 是否开启三态
                tristate: true,
                // 控制当前 checkbox 的开启状态
                value: _isChecked,
                // 不设置该方法，处于不可用状态
                onChanged: (checked) {
                  // 管理状态值
                  setState(() => _isChecked = checked);
                },
                // 选中时的颜色
                activeColor: Colors.pink,
                // 这个值有 padded 和 shrinkWrap 两个值，
                // padded 时候所占有的空间比 shrinkWrap 大，别的原谅我没看出啥
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),

              /// 点击无响应
              Checkbox(value: _isChecked, onChanged: null, tristate: true)
            ],
          ),
          const Divider(),
          const Text("CheckboxListTile"),
          CheckboxListTile(
            // 描述选项
            title: Text('Make this item checked'),
            // 二级描述
            subtitle: Text(
                'description...description...\ndescription...description...'),
            // 和 checkbox 对立边的部件，例如 checkbox 在头部，则 secondary 在尾部
            secondary:
                Image.asset('imgs/loading.gif', width: 30.0, height: 30.0),
            value: _isTitleChecked,
            // title 和 subtitle 是否为垂直密集列表中一员，最明显就是部件会变小
            dense: true,
            // 是否需要使用 3 行的高度，该值为 true 时候，subtitle 不可为空
            isThreeLine: true,
            // 控制 checkbox 选择框是在前面还是后面
            controlAffinity: ListTileControlAffinity.leading,
            // 是否将主题色应用到文字或者图标
            selected: true,
            onChanged: (checked) {
              setState(() => _isTitleChecked = checked);
            },
          ),
          CheckboxListTile(
            // 描述选项
            title: Text(
                'Make this item checked description description description description'),

            // 和 checkbox 对立边的部件，例如 checkbox 在头部，则 secondary 在尾部
            secondary:
                Image.asset('imgs/loading.gif', width: 90.0, height: 90.0),
            value: _isTitleChecked,
            onChanged: (checked) {
              setState(() => _isTitleChecked = checked);
            },
          ),
          _oneCheckboxGroup(),
          _twoRadioButtonGroup(),
        ],
      ),
    );
  }

  Widget _oneCheckboxGroup() {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: const Text(
            "_oneCheckboxGroup多选和禁选",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),
        GwCheckboxGroup(
          key: Key("_oneCheckboxGroup"),
          labels: const <String>[
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
          ],
          selectList: const [
            "Sunday",
            "Monday",
          ],
          disabled: const ["Wednesday", "Friday"],
          onChange: (bool isChecked, String label, int index) =>
              print("isChecked: $isChecked   label: $label  index: $index"),
          onSelected: (List<String> checked) =>
              print("checked: ${checked.toString()}"),
        ),
      ],
    );
  }

  Widget _twoRadioButtonGroup() {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: const Text(
            "_twoRadioButtonGroup 单选/多选",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),
        Row(
          children: [
            RadioButtonGroup(
              labels: const [
                "Option 1",
                "Option 2",
              ],
              onChange: (String label, int index) =>
                  print("label: $label index: $index"),
              onSelected: (String label) => print(label),
            ),
            GwCheckboxGroup(
              key: Key("_twoRadioButtonGroup"),
              orientation: GroupedButtonsOrientation.HORIZONTAL,
              margin: const EdgeInsets.only(left: 12.0),
              labels: const <String>[
                "A",
                "B",
              ],
              selectList: _checked,
              itemBuilder: (Checkbox cb, Text txt, int i) {
                return Column(
                  children: <Widget>[
                    const Icon(Icons.star),
                    cb,
                    txt,
                  ],
                );
              },
              onChange: (bool isChecked, String label, int index) =>
                  print("isChecked: $isChecked   label: $label  index: $index"),
              onSelected: (List<String> selected) {
                setState(() {
                  _checked = selected;
                });
                print("checked: ${_checked.toString()}");
              },
            ),
            RadioButtonGroup(
              orientation: GroupedButtonsOrientation.HORIZONTAL,
              margin: const EdgeInsets.only(left: 12.0),
              labels: const <String>[
                "One",
                "Two",
              ],
              picked: _picked,
              itemBuilder: (Radio rb, Text txt, int i) {
                return Column(
                  children: <Widget>[
                    Icon(Icons.public),
                    rb,
                    txt,
                  ],
                );
              },
              onChange: (String label, int index) =>
                  print("label: $label index: $index"),
              onSelected: (String selected) {
                setState(() {
                  _picked = selected;
                });
                print(selected);
              },
            ),
          ],
        )
      ],
    );
  }
}
